<template>
  <div>
    <!-- 头部样式 -->
    <div class="header">
      <!-- 顶部导航栏 -->
      <van-nav-bar>
        <template #title>
          <span>面试宝典</span>
          <span>北京</span>
          <span class="iconfont iconicon_xuanze_nor"></span>
        </template>
      </van-nav-bar>
      <!-- 项目列表栏 -->
      <van-tabs v-model="activeName" swipe-threshold type="card" swipeable>
        <van-tab title="标签 1" name="a"></van-tab>
        <van-tab title="标签 2" name="b"></van-tab>
        <van-tab title="标签 3" name="c"></van-tab>
        <van-tab title="标签 1" name="a"></van-tab>
        <van-tab title="标签 2" name="b"></van-tab>
        <van-tab title="标签 3" name="c"></van-tab>
        <van-tab title="标签 1" name="a"></van-tab>
        <van-tab title="标签 2" name="b"></van-tab>
        <van-tab title="标签 3" name="c"></van-tab>
      </van-tabs>
    </div>
    <!-- 刷题部分布局 -->
    <div class="testBank">
      <div class="testboxfather">
        <div class="testbox">
          <span class="iconfont iconicon_mine_cuoti"></span>
        </div>
        <span class="text">常错题库</span>
      </div>
      <div class="testboxfather">
        <div class="testbox">
          <span class="iconfont iconicon_mine_qiyeshoucang"></span>
        </div>
        <span class="text">企业题库</span>
      </div>
      <div class="testboxfather">
        <div class="testbox">
          <span class="iconfont iconicon_mine_tikushoucang"></span>
        </div>
        <span class="text">收藏题库</span>
      </div>
      <div class="testboxfather">
        <div class="testbox">
          <span class="iconfont iconicon_mine_mianjing"></span>
        </div>
        <span class="text">已答题库</span>
      </div>
      <van-circle
        v-model="currentRate"
        :rate="40"
        :speed="100"
        :text="text"
        stroke-linecap="butt"
        :color="gradientColor"
        layer-color="#fdedf1"
        size="110px"
      >
        <template #default>
          <div>
            <span>顺序刷题</span>
            <span>50/233</span>
          </div>
        </template>
      </van-circle>
    </div>
    <!-- 刷题部分布局 结束-->
  </div>
</template>
<script>
export default {
  name: 'login',

  data () {
    return {
      currentRate: 0,
      activeName: 'a',
      gradientColor: {
        '0%': '#f4a0b5',
        '100%': '#eb4a71'
      }
    }
  },
  computed: {
    text () {
      return this.currentRate.toFixed(0) + '%'
    }
  },

  mounted () {},

  methods: {}
}
</script>
<style lang="less">
body {
  background-color: #f7f4f5;
}
.header {
  // height: 105px;
  padding-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.van-hairline--bottom::after {
  border: none;
}
.van-nav-bar__title {
  span:first-child {
    font-size: 18px;
    font-weight: 400;
    font-family: PingFangSC-Semibold;
    color: #222222;
  }
  span:nth-child(2) {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #545671;
    margin-left: 5.5px;
  }
  span:last-child {
    width: 15px;
    height: 15px;
  }
}
.van-tabs--card {
  margin-top: 15px;
}
.van-tabs__nav--card {
  border: none;
}
.van-tabs__nav--card .van-tab {
  color: black;
  border: none;
  height: 26px;
  margin-right: 10px;
  border-radius: 14px;
  font-size: 12px;
  background-color: #f7f4f5;
  &.van-tab--active {
    color: #fff;
    background-color: #00b8d4;
  }
}
.testBank {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-top: 5px;
  height: 200px;
  position: relative;
  .testboxfather {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 41px;
    top: 16px;
    .testbox {
      width: 44px;
      height: 44px;
      background-image: linear-gradient(180deg, #ff8080 0%, #ff4949 100%);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 23px;
        color: #fff;
      }
    }
    .text {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #545671;
      font-weight: 400;
      margin-top: 6px;
    }
  }
  :nth-child(2) {
    top: auto;
    bottom: 16px;
    .testbox {
      background-image: linear-gradient(180deg, #00ddec 0%, #00b8d4 100%);
    }
  }
  :nth-child(3) {
    left: auto;
    right: 36px;
    .testbox {
      background-image: linear-gradient(180deg, #ffda05 0%, #ffb302 100%);
    }
  }
  :nth-child(4) {
    left: auto;
    top: auto;
    right: 36px;
    bottom: 16px;
    .testbox {
      background-image: linear-gradient(180deg, #3ee5b1 0%, #1dc779 100%);
    }
  }
  .van-circle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-image: linear-gradient(180deg, #ff6f92 0%, #e40137 100%);
    }
  }
}
</style>
